<template>
  <div class="perfect">
    <h2>完善信息</h2>
    <p>请准确填写孩子信息,有助于课程的精准匹配</p>
    <div class="portrait">
      <div>
        <div class="show showb" v-if="showboy"></div>
        <img src="@/assets/image/Login_Complete_boy.png" alt="" @click="boy" />
        <!-- <h3 :class="activeb == true ? 'active' : ''">男孩</h3> -->
        <h3 :class="{ active: showboy }">男孩</h3>
      </div>
      <div>
        <div class="show showg" v-if="showgiry"></div>
        <img
          src="@/assets/image/Login_Complete_girl.png"
          alt=""
          @click="giry"
        />
        <!-- <h3 :class="active == true ? 'active' : ''">女孩</h3> -->
        <h3 :class="{ active: showgiry }">女孩</h3>
      </div>
    </div>
    <div class="inputs">
      <input
        type="text"
        placeholder="宝贝英文名"
        class="egname"
        v-model="name"
      />
      <button class="setname" @click="ranName">智能取名</button>
      <input type="text" placeholder="宝贝生日" />
      <button class="open" @click="back">开启学习之旅</button>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import getRanName from "./Name";
import { useRoute, useRouter } from "vue-router";
export default {
  setup() {
    const showboy = ref(false);
    const showgiry = ref(false);
    const active = ref(showgiry);
    const activeb = ref(showboy);
    const route = useRoute();
    const router = useRouter();
    const name = ref("");
    const boy = () => {
      showboy.value = true;
      showgiry.value = false;
    };
    const giry = () => {
      showgiry.value = true;
      showboy.value = false;
    };
    const ranName = () => {
      name.value = getRanName(3);
    };
    const back = () => {
      router.push("./home");
    };
    return {
      showboy,
      showgiry,
      boy,
      giry,
      ranName,
      back,
      name,
      route,
      router,
      active,
      activeb,
    };
  },
};
</script>

<style lang="less" scoped>
.perfect {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
}
.portrait {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  .show {
    width: 90px;
    border-radius: 50%;
    height: 90px;
    background: #3b98ff;
    position: absolute;
    top: 90px;
    z-index: 3;
  }
  .showb {
    left: 49px;
  }
  .showg {
    right: 49px;
  }
  img {
    width: 80px;
    position: relative;
    z-index: 999;
  }
  h3 {
    margin-left: 25px;
    margin-top: 10px;
    color: #bfc7d1;
    font-size: 15px;
  }
}
h2 {
  font-size: 18px;
}
p {
  color: #656565;
  font-size: 14px;
  font-weight: 600;
  margin-top: 15px;
}
input,
button {
  width: 80%;
  height: 45px;
  border-radius: 30px;
  margin-left: 40px;
  font-size: 16px;
  margin-top: 20px;
  border: none;
  outline: none;
}
.inputs {
  width: 100%;
  input {
    background: #dfdfdf;
    color: #000;
    text-indent: 20px;
  }
  .setname {
    color: #3696ff;
    background: #fff;
    width: 90px;
    height: 30px;
    position: absolute;
    right: 50px;
    top: 214px;
    font-weight: 600;
  }
  .egname {
    position: relative;
  }
  .open {
    background: #3b98ff;
    color: #fff;
  }
}
.active {
  color: #3696ff !important;
}
</style>
